<template>
  <!-- zeh首页 -->
  <div class="breadcrumb">
    <Breadcrumb :aaa="aaa" :msgg="msg" :txt="txt" :path1="path1" />
  </div>
  <div class="pie-container" style="padding: 40px 100px">
    <div class="flex">
      <el-radio-group v-model="pieType" size="large">
        <el-radio-button label="sale_">销量</el-radio-button>>
        <el-radio-button label="_money">销售额</el-radio-button>>
        <el-radio-button label="_money">销售额</el-radio-button>>
        <el-radio-button label="money_">销售额</el-radio-button>>
      </el-radio-group>
      <el-select v-model="pieDay" class="m-2" placeholder="Select" size="large">
        <el-option v-for="item in pieDays" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </div>
    <div id="pie" style="width: 100%; height: 350px"></div>
    <div class="map-container">
      <div id="map" style="width: 100%; height: 600px"></div>
    </div>
    <div class="map-container">
      <div id="map" style="width: 100%; height: 600px"></div>
    </div>
  </div>
  <div class="map-container"></div>
</template>

<script setup lang="ts">
// 1. 导入echarts 模块
import * as echarts from "echarts";
import { onMounted, ref, watch } from "vue";
import * as api from "../../request/api";
//面包屑
import Breadcrumb from "../../components/breadcrumb.vue";
// 直接把地址的json数据导入
import china from "../../json/china.json";
type EChartsOption = echarts.EChartsOption;
//面包屑
let msg = ref("");
let txt = ref("");
let path1 = ref("/index");
let aaa = ref(1);

// echarts 需要一个容器（DOM）,但是vue创建的时候,一定注意 哪个生命周期是有（onMounted） 真实DOM 可以初始化的

// pieType  要得到就是  sale_ 或着 money_
const pieType = ref<"sale_" | "money_">("sale_");
// 默认的选项
const pieDay = ref("yesterday");
const pieDays = [
  {
    label: "昨天",
    value: "yesterday",
  },
  {
    label: "今天",
    value: "today",
  },
  {
    label: "前三天",
    value: "three_days",
  },
  {
    label: "前7天",
    value: "seven_days",
  },
  {
    label: "前14天",
    value: "fourteen_days",
  },
];

let pieData: IPieItem[] = [];
var pieChart: echarts.ECharts;
var pieOption: EChartsOption;

// 当我们的 pieType 发生变化的时候，修改 饼图数据,
// 可以使用的方法 有很多 ， radio ， select 都有 change 事件，可以用来 做 pieType 的变化的处理
// 我们这里 直接使用 watch
watch([pieType, pieDay], () => {
  let key = "";
  if (pieType.value === "sale_") {
    // 意味着 我们点击了 销量这个按钮
    key = pieType.value + pieDay.value;
  } else {
    key = pieDay.value + pieType.value;
  }
  // console.log(key);
  // 根据key 来去除数据 ，重新渲染
  const data = pieData.map((item) => ({
    name: item.name,
    value: item[key],
  }));
  (pieOption.series as echarts.SeriesOption[])[0].data = data;
  pieOption && pieChart.setOption(pieOption);
});

onMounted(() => {
  api.admin.GetIndexDataApi().then((res) => {
    console.log(res);
    pieData = res.salePie;
    // 2. 初始化echarts 实例
    var chartDom = document.getElementById("pie") as HTMLElement;
    // console.log(chartDom);
    pieChart = echarts.init(chartDom);
    // 可能需要对数据进行转换
    const data = res.salePie.map((item) => ({
      name: item.name,
      value: item.sale_yesterday,
    }));
    // console.log(data);

    // 3. 传入数据，绘制图表
    // 数据从series 的第一个数组项的data传入
    // series 是 echarts.SeriesOption | echarts.SeriesOption[] | undefined 类型
    (pieOption.series as echarts.SeriesOption[])[0].data = data;
    console.log(pieOption);
    pieOption && pieChart.setOption(pieOption);

    initMap(res.saleMap);
  });
  pieOption = {
    // 鼠标移动上去的提示
    tooltip: {
      trigger: "item",
      // {a}  {b}  {c}  {d} 是一种格式
      formatter: "{b} : {c},({d}%)",
    },
    // 图例
    legend: {
      left: "right",
      top: "5%",
      right: 20,
      height: 100,
      orient: "vertical",
    },
    series: [
      {
        // name: 'Radius Mode',
        type: "pie",
        radius: ["40%", "70%"],
        center: ["20%", "50%"],
        label: {
          show: true,
          position: "outside",
        },
        // 高亮
        emphasis: {
          label: {
            show: true,
          },
        },
        data: [
          { value: 40, name: "rose 1" },
          { value: 33, name: "rose 2" },
          { value: 28, name: "rose 3" },
          { value: 22, name: "rose 4" },
          { value: 20, name: "rose 5" },
          { value: 15, name: "rose 6" },
          { value: 12, name: "rose 7" },
          { value: 10, name: "rose 8" },
        ],
      },
    ],
  };
});

// 地图的使用
// 1. 需要一个json数据，让这些数据告诉我们需要展示哪些地区
function initMap(mapData: IMapItem[]) {
  type EChartsOption = echarts.EChartsCoreOption;
  var chartDom = document.getElementById("map")!;
  var myChart = echarts.init(chartDom);
  var option: EChartsOption;
  // console.log(mapData);
  echarts.registerMap("HK", china as any);
  // 转换一下格式 {name,value}的格式
  const data = mapData.map((item) => ({
    name: item.areaName,
    value: item.saleNum,
  }));
  myChart.setOption(
    (option = {
      title: {
        text: "全国销量分布图",
      },
      tooltip: {
        trigger: "item",
        formatter: "{b}<br/> 销量 {c} ",
      },
      visualMap: {
        min: 0,
        max: 1000000,
        realtime: true,
        calculable: true,
        inRange: {
          color: ["blue", "blue", "green", "pink"],
        },
      },
      series: [
        {
          // name: '香港18区人口密度',
          type: "map",
          map: "HK",
          label: {
            show: false,
          },
          data,
          // 自定义名称映射
          // json数据 和 name
        },
      ],
    })
  );
  option && myChart.setOption(option);
  //
  myChart.setOption(
    (option = {
      title: {
        text: "全国销量分布图",
      },
      tooltip: {
        trigger: "item",
        formatter: "{b}<br/> 销量 {c} ",
      },
      visualMap: {
        min: 0,
        max: 1000000,
        realtime: true,
        calculable: true,
        inRange: {
          color: ["blue", "blue", "green", "pink"],
        },
      },
      series: [
        {
          // name: '香港18区人口密度',
          type: "map",
          map: "HK",
          label: {
            show: false,
          },
          data,
          // 自定义名称映射
          // json数据 和 name
        },
      ],
    })
  );
  option && myChart.setOption(option);
}
</script>

<style scoped>
.flex {
  display: flex;
  justify-content: space-between;
}

.breadcrumb {
  height: 45px;
  border-bottom: 1px solid #ebeef5;
  font-size: 20px;
}

canvas {
  border-bottom: 1px solid;
}
</style>
